<template>
  <el-card>
    <el-form label-width="120px" :model="addForm" ref="addForm" :rules="formRules">
      <el-form-item label="上级分类" prop="pid">
        <el-select placeholder="请选择" v-model="addForm.pid">
          <el-option value>请选择</el-option>
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input placeholder="请输入分类名称" v-model="addForm.catename" />
      </el-form-item>
      <el-form-item label="分类图片">
        <!-- 
            action: 图片上的接口地址
            list-type:展示效果
            on-preview: 进行图片预览的回调函数
            on-remove: 图片移除的回调函数
         -->
        <el-upload
          action="#"
          :limit="1"
          :on-exceed="limitTips"
          :auto-upload="false"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-change="fileChange"
          >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="addForm.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addCate('addForm')">立即添加</el-button>
        <el-button @click="resetForm('addForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
       dialogImageUrl: '',
        dialogVisible: false,
      cateList: [],
      addForm: {
        pid: "",
        catename: "",
        img: "",
        status: 1
      },
      formRules: {
        pid: {
          required: true,
          message: "请选择上级分类",
          trigger: "blur"
        },
        catename: {
          required: true,
          message: "请填写分类名称",
          trigger: "blur"
        },
        status: {
          required: true,
          message: "请填选择状态",
          trigger: "blur"
        }
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    // 图片数量超出限制的回调函数
    limitTips(){
        this.$error('最多只能上传1张图片');
    },
    // 监听文件的改变
    fileChange(file){
      // console.log(file);
      // 将图片的原始数据保存到img属性之上
      this.addForm.img=file.raw;
    },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    // 获取上级分类
    async getCateList() {
      const res = await this.$http.get("/api/catelist?istree=1");
      if (res.code == 200) {
        this.cateList = res.list;
      }
    },
    addCate(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          // 注意: 提交数据的时候, 必须使用FormData的方式进行提交
          const fd=new FormData();
          for(let key in this.addForm){
            fd.append(key,this.addForm[key]);
          }
          // 提交表单
          const res=await this.$http.post('/api/cateadd',fd);
          if(res.code==200){
            this.$success('添加成功');
            // 表单重置
            this.$refs[form].resetFields();
          }else{
            this.$error('添加失败');
          }
        } else {
          console.log("表单校验不通过");
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    }
  },
  created() {
    this.getCateList();
  }
};
</script>

<style>

</style>